<template>
    <div id="actStatistics">
        <div class="header-box">
            <div class="category-box"><span>首页 </span>&gt; 活动统计</div>
        </div>
		<div class="tool-box">
            <el-input placeholder="按活动名称进行搜索" v-model="search">
                <el-button slot="append"><i @click="fetchActivityList" class="fa fa-search" aria-hidden="true"></i></el-button>
            </el-input>
            <div class="btn" @click="toCreateActivity">新建活动</div>
        </div>
        <table v-loading="loading">
            <thead>
                <tr>
                    <td class="operate">活动名称
                        <!--<i class="fa fa-sort" aria-hidden="true"></i>-->
                    </td>
                    <td class="operate" style="width:10%">创建日期
                        <!--<i class="fa fa-sort" aria-hidden="true"></i>-->
                    </td>
                    <td class="operate condition-td" style="width:10%">活动类型<i class="fa fa-angle-down" aria-hidden="true"></i>
                        <!-- <div class="td-condition-box">
                            <p v-for="(item, index) in typeFilter"
                               :class="{'blueColor': index===currentListTypeFilter}"
                               @click="chooseType(item, index)">{{item.type}}</p>
                        </div> -->
                    </td>
                    <td class="operate condition-td" style="width:10%">状态<i class="fa fa-angle-down" aria-hidden="true"></i>
                        <!-- <div class="td-condition-box">
                            <p v-for="(item, index) in conditionFilter"
                               :class="{'blueColor': index===currentListCondition}"
                               @click="chooseConditon(item, index)">{{item.type}}</p>
                        </div> -->
                    </td>
                    <td style="width:10%">累计浏览</td>
                    <td style="width:10%">累计参与人数</td>
                    <td>累计中奖数</td>
                    <td style="width:20%">更多详细统计</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in dataList">
                    <td>{{item.name}}</td>
                    <td>{{item.created_at.split(' ')[0]}}</td>
                    <td>{{item.model.name}}</td>
                    <td :class="{'item-green':item.stu==1&&item.isPause==0,'item-gray':item.isPause==1||(item.stu!=1&&item.isPause!=1),'item-yellow':item.stu==2&&item.isPause!=1}">{{item | stateActivityFliter}}</td>
                    <td>{{item.clicks}}</td>
                    <td>{{item.joins}}</td>
                    <td>{{item.winnings}}</td>
                    <td class="blueColor"><span style="padding:10px;" @click="goToDetail(item.id,item.name,item.model.name)">查看报表</span></td>
                </tr>
            </tbody>
        </table>
        <div class="add-prize-footer text-center" v-show="dataList.length>0">
            <el-pagination
                small
                layout="prev, pager, next"
                :total="total"
                @current-change="pageChange"
                >
            </el-pagination>
        </div>
        <div class="no-data" v-show="dataList.length===0&&!loading">您还没有创建应用内活动？<span @click="toCreateActivity">去创建一个</span></div>
    </div>
</template>

<script>
    import * as api from './../api/api'
    export default {
    	data(){
    		return {
                loading: true,
                current_page: 1,
                total: 0,
                search: '',
                dataList: [],
                actConditionCode: {
                    '1': '进行中',
                    '2': '未开始',
                    '3': '已暂停',
                    '4': '已结束'
                },
                currentListCondition: 0,
                conditionFilter: [
                    {
                        type: '全部',
                        value: ''
                    },{
                        type: '进行中',
                        value: '1'
                    },{
                        type: '未开始',
                        value: '2'
                    },{
                        type: '已暂停',
                        value: '3'
                    },{
                        type: '已结束',
                        value: '4'
                    }
                ],
                currentListTypeFilter: 0,
                typeFilter: [
                    {
                        type: '全部',
                        value: ''
                    },{
                        type: '口令',
                        value: '1'
                    },{
                        type: '全民捉鬼',
                        value: '2'
                    },{
                        type: '幸运彩蛋',
                        value: '3'
                    },{
                        type: '问卷调查',
                        value: '4'
                    },{
                        type: '全民打飞机',
                        value: '5'
                    },{
                        type: '九宫格',
                        value: '6'
                    },{
                        type: '刮刮乐',
                        value: '7'
                    },{
                        type: '大转盘',
                        value: '8'
                    },{
                        type: '剥粽子',
                        value: '9'
                    }
                ]
    		}
    	},
        watch: {

        },
    	components: {
    		
    	},
        created(){
            this.fetchActivityList()
        },
    	mounted(){

    	},
        computed: {

        },
    	methods: {
            toCreateActivity(){
                this.$router.push({name:'chooseTemplate'});
            },
            chooseConditon(item, index){
                this.currentListCondition = index;
            },
            chooseType(item, index){
                this.currentListTypeFilter = index;
            },
            goToDetail(id,name,type){
                this.$message('跳转中..');
                localStorage.setItem('actName', name);
                localStorage.setItem('actType', type);
                this.$router.push({ name: 'statistics', query: { act_id: id }});
            },
            //点击当前的页数
            pageChange(a){
                this.current_page=a;
                this.fetchActivityList();
            },
            fetchActivityList(){
                var that = this;
                that.loading = true;
                api.statisticsList({
                    category: 2,
                    search: that.search,
                    order: 'desc',
                    limit: 10,
                    offset: (parseInt(that.current_page)-1)*10
                }).then(res => {
                    that.loading = false;
                    var arr = res.data.data.rows;
                    var  _now = +new Date();
                    arr.map(function (ele, i) {
                        let _start = +new Date(ele.startTime);
                        let _end = +new Date(ele.endTime);
                        if (_now < _start) { //未开始
                            ele['stu'] = '0';
                        } else if (_now >= _start && _now <= _end) { //进行中
                            ele['stu'] = '1';
                        } else if (_now > _end) { //已结束
                            ele['stu'] = '2';
                        }
                    });
                    that.dataList = arr;
                    that.total = res.data.data.total;
                })
            }
    	}
    }
</script>
<style>
    #actStatistics .tool-box .el-input-group--append{
        width:237px;
    }
</style>
<style lang="less" scoped>
    #actStatistics{
        background-color: #f4f8fb;
        width:100%;
        min-height: 100%;
        padding:20px 40px;
        box-sizing: border-box;
    }
    .header-box{
        height: 30px;
    }
    .category-box{
        color:#666666;
        font-size: 14px;
        float:left;
        padding-right:104px;
        border-right: 1px solid #e8e8e8;
    }
    .category-box span{
        color:#1b2b38;
    }
    .tool-box{
        padding-top:20px;
        padding-bottom:10px;
        position: relative;
    }
    .tool-box ul{
        width: 282px;
        height: 47px;
        position: absolute;
        left:0;
        bottom:0;
    }
    .tool-box ul li{
        float:left;
        width: 50%;
        height: 100%;
        line-height: 47px;
        text-align: center;
        color: #888;
        border-radius: 4px 4px 0 0;
        font-size: 14px;
    }
    .tool-box ul li:not(.active){
        cursor: pointer;
    }
    .tool-box ul .active{
        color: #333;
        background-color: #f1f1f1;
    }
    .tool-box .btn{
        float:right;
        width: 90px;
        padding: 0;
        border-radius: 13px;
        background-color: #ec5463;
        color: #fff;
        font-size: 12px;
        border: 0;
        height: 26px;
        line-height: 26px;
        cursor: pointer;
        font-weight: 400;
        text-align: center;
        margin-top: 5px;
    }
    #actStatistics table{
        width:100%;
        border-collapse:collapse;
    }
    #actStatistics table thead {
        width: 100%;
        height: 50px;
        color: #333;
        background-color: #f1f1f1;
    }
    #actStatistics table thead tr>td{
        height: 50px;
        width: 15%;
        text-align: center;
        font-size: 14px;
    }
    #actStatistics table thead tr>td>i{
        margin-left: 4px;
    }
    .operate{
        cursor:pointer;
    }
    #actStatistics table>tbody>tr{
        border-bottom: 1px solid #efefef;
        background: #ffffff;
        height: 60px;
    }
    #actStatistics table>tbody>tr:hover{
        background: #effdfc;
    }
    #actStatistics table>tbody>tr:hover>td:first-child{
        border-color:#20a0ff;
    }
    #actStatistics table>tbody>tr>td:first-child{
        border-left: 3px solid #ffffff;
        box-sizing: border-box;
    }
    #actStatistics table>tbody>tr>td{
        font-size: 12px;
        color:#888888;
        text-align: center;
    }
    .operate-td{
        color:#2db7f5;
    }
    .operate-td span i{
        margin-left: 3px;
    }
    .operate-td span:nth-child(2),
    .operate-td span:nth-child(4){
        position: relative;
        top:-2px;
    }
    .operate-td span:nth-child(1),
    .operate-td span:nth-child(3),
    .operate-td span:nth-child(5){
        padding:0 5px;
        cursor: pointer;
    }
    .operate-td span:nth-child(1):hover,
    .operate-td span:nth-child(3):hover,
    .operate-td span:nth-child(5):hover{
        text-decoration: underline;
    }
    .td-more-box{
        width: 70px;
        box-shadow: 2px 2px 10px rgba(0,0,0,.3);
        background: #ffffff;
        padding:5px 0;
        position: absolute;
        left:-30%;
        bottom:-71px;
        display: none;
        z-index: 2;
    }
    .condition-td{
        width:8%;
        position:relative;
    }
    .td-condition-box{
        width: 70px;
        box-shadow: 2px 2px 10px rgba(0,0,0,.3);
        background: #ffffff;
        padding:5px 0;
        position: absolute;
        left:0;
        right:0;
        margin: auto;
        top:40px;
        z-index: 2;
        max-height: 190px;
        overflow-y: auto;
        display: none;
    }
    .condition-td:hover .td-condition-box{
        display: block;
    }
    .td-more-box p,.td-condition-box p{
        color: #888888;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
    }
    .td-more-box p:hover,.td-condition-box p:hover{
        text-decoration: underline;
        color: #2db7f5;
    }
    .blueColor{
        color: #2db7f5!important;
    }
    td.blueColor:hover{
        text-decoration: underline;
        cursor: pointer;
    }
    .more-td-btn{
        position: relative;
    }
    .more-td-btn:hover .td-more-box{
        display: block;
    }
    .add-prize-footer{
        width:100%;
        height: 87px;
        box-sizing: border-box;
        padding: 15px;
        background: #ffffff;
    }
    .page-inner{
        width: 330px;
        margin: 10px auto;
        text-align: center;
        line-height: 34px;
    }
    .upload-page-inner{
        width:550px;
    }
    .page-inner .page-btn{
        width: 36px;
        height: 24px;
        border: 0;
        padding: 0;
        background: url(../assets/img/page_icon.png) no-repeat;
        background-size: 128px 64px;
        cursor: pointer;
        position: relative;
        top:6px;
    }
    .page-inner .btn1{
        background-position: -48px -26px;
    }
    .page-inner .btn1.disable{
        background-position: -85px -26px;
    }
    .page-inner .btn2{
        background-position: -48px -1px;
    }
    .page-inner .btn2.disable{
        background-position: -85px -1px;
    }
    .page-inner span{
        font-size: 14px;
        color:#333333;
    }
    .page-inner .span1{
        padding:0 5px;
    }
    .page-inner .span2{
        padding-left:10px;
    }
    .page-inner input{
        width: 50px;
        text-align: center;
        height: 34px;
        padding: 6px 12px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.42857;
        color: #555;
        display: inline-block;
        outline: 0!important;
        box-shadow: none!important;
    }
    .page-inner .btn3{
        width: 46px;
        height: 24px;
        border: 0;
        padding: 0;
        background: url('../assets/img/page_icon.png') no-repeat;
        background-size: 128px 64px;
        cursor: pointer;
        background-position: -1px -1px;
        position: relative;
        top:7px;
        left:4px;
    }
    .page-inner .btn3.disable{
        background-position: -1px -26px;
    }
    .greenColor{
        color: #a1d568;
    }
    .no-data{
        padding: 30px 0;
        background-color: #fff;
        text-align: center;
        color: #888;
        font-size: 14px;
        width:100%;
    }
    .no-data span{
        color: #ec5463;
        cursor: pointer;
    }
    .no-data span:hover{
        text-decoration: underline;
    }
    .item-green{
        color:#a1d568 !important;
    }
    .item-gray{
        color:#999 !important;
    }
    .item-yellow{
        color:#F7BA2A !important;
    }
</style>
